<template>
	<div class="person">
		<h2>{{ num }}</h2>
		<button @click="plusFun">+1</button>
	</div>
</template>
<script lang="ts" setup>
import {
	ref, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted
} from 'vue'

let num = ref(0);

function plusFun() {
	num.value += 1
}

//挂载前
onBeforeMount(() => {
	console.log("挂载前");
})
//挂载完毕
onMounted(() => {
	console.log("挂载完毕")
})

//更新前
onBeforeUpdate(() => {
	console.log("更新前")
})
//更新完成
onUpdated(() => {
	console.log("更新完成")
})
//卸载前
onBeforeUnmount(() => {
	console.log("卸载前")
})
//卸载完成
onUnmounted(() => {
	console.log("卸载完成")
})



</script>
<style>
.person {
	padding: 10px;
}
</style>
